<template>
	<view>
		<view class="flex-jus flex-start">
			<view class="flex1 mr10">
				<view class="bgFff list-item mb20 box_shadow" v-for="(item,index) in ouList" :key="index"
					@click="openUrl('/subpage/travel/workDetail?id='+item.id)">
					<view class="list-img">
						<image :src="api_host + item.coverIcon" mode=""></image>
					</view>
					<view class="p20">
						<view class="flex user-box">
							<image class="avatar" :src="api_host + item.user.userAvatar" mode=""></image>
							<text class="f24 c343 ml10 nick-name">{{item.user.userName}}</text>
						</view>
						<u-gap height="5"></u-gap>
						<view class="f26 c343 bold textoverflow2">{{item.title}}</view>
						<u-gap height="5"></u-gap>
						<view class="flex">
							<u-icon name="heart-fill" size="16"></u-icon>
							<text class="f24 c999 ml10">{{item.likeVolume || 0}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="flex1 ml10">
				<view class="bgFff list-item mb20 box_shadow" v-for="(item,index) in jiList" :key="index"
					@click="openUrl('/subpage/travel/workDetail?id='+item.id)">
					<view class="list-img">
						<image :src="api_host + item.coverIcon" mode=""></image>
					</view>
					<view class="p20">
						<view class="flex user-box">
							<image class="avatar" :src="api_host + item.user.userAvatar" mode=""></image>
							<text class="f24 c343 ml10 nick-name">{{item.user.userName}}</text>
						</view>
						<u-gap height="5"></u-gap>
						<view class="f26 c343 bold textoverflow2">{{item.title}}</view>
						<u-gap height="5"></u-gap>
						<view class="flex">
							<u-icon name="heart-fill" size="16"></u-icon>
							<text class="f24 c999 ml10">{{item.likeVolume || 0}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {} from '@/common/api.js'
	export default {
		name: '',
		props: {
			dataArray: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				ouList: [],
				jiList: []
			}
		},
		onLoad(option) {

		},
		created() {
			this.getList()
		},
		methods: {
			getList() {
				for (var i = 0; i < this.dataArray.length; i++) {
					if (i % 2 == 0) {
						this.ouList.push(this.dataArray[i])
					} else {
						this.jiList.push(this.dataArray[i])
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.list-item {
		border-radius: 50rpx;

		.list-img {
			image {
				width: 100%;
				height: 320rpx;
				border-radius: 50rpx 50rpx 50rpx 0;
			}
		}

		.user-box {
			margin-top: -80rpx;
		}

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50% 50% 50% 0;
			border: 3px solid #fff;
			background-color: #fff;
		}

		.nick-name {
			margin-top: 40rpx;
		}
	}
</style>